<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>在线学习报名系统</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="/assets/vue.js"></script>
    <script src="/assets/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/assets/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/element-ui/lib/index.js"></script>
    <script src="/assets/js/api.js"></script>
</head>

<body>
    <div id="app">
        <div class="s-header">
            在线学习报名系统
        </div>
        <div class="s-body">
            <template>
                <el-tabs  type="border-card" :tab-position="tabPosition" v-model="checkModel" @tab-click="handleCheckModel" style="background: #f5f7fa;">
                    <el-tab-pane label="课程查询" name="course" style="overflow: auto">
                        <el-tabs v-model="courseType" @tab-click="selectCourseList">
                            <el-tab-pane label="全部课程" name="all"></el-tab-pane>
                            <el-tab-pane label="系统推荐" name="recommend"></el-tab-pane>
                            <el-tab-pane label="我的收藏" name="collect"></el-tab-pane>
                        </el-tabs>
                        <div v-loading="courseLoading">
                            <el-row :gutter="22">
                                <el-col :span="6"  v-for="course in courseList">
                                    <el-card  shadow="hover" :body-style="{ padding: '0px' }" class="s-course-card">
                                        <el-image :src="course.cover"
                                                  class="s-course-cover"
                                                  fit="cover"
                                                  @click="handleShowCourseDetail(course)">
                                        </el-image>
                                        <div style="padding: 10px;">
                                            <p>
                                                <span class="multiLineEllipsis">
                                                    @{{course.name}}
                                                    <span v-if="course.isRecommend" style="color: red;padding-left: 3px">
                                                        <i class="el-icon-thumb"></i>系统推荐
                                                    </span>
                                                </span>
                                                <template>
                                                    <template v-if="course.isCollect">
                                                        <el-button class="s-course-sign-button" @click="unCollectCourse(course.id)" type="text">
                                                            <i class="el-icon-star-on"></i>
                                                        </el-button>
                                                    </template>
                                                    <template v-else>
                                                        <el-button class="s-course-sign-button" @click="collectCourse(course.id)" type="text"><i class="el-icon-star-off"></i></el-button>
                                                    </template>
                                                </template>
                                            </p>
                                            <div class="bottom clearfix">
                                                <span>教师：@{{course.teacher.name}}</span>
                                                <el-button @click="handleSignUp(course)" class="s-course-sign-button" type="text">报名</el-button>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>

                        <el-pagination
                            background
                            style="margin-bottom: 20px"
                            layout="prev, pager, next"
                            :current-page.sync="coursePage"
                            @current-change="selectCourseList"
                            :total="courseTotal">
                        </el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="报名管理" name="signUp">
                        <el-tabs v-model="signUpStr" @tab-click="handleClickSignUpStatus">
                            <template v-for="(signUp, i) in signUpStatusList">
                                <el-tab-pane :label="signUp" :name="signUp" class="signup-table">
                                    <el-table
                                        v-loading="signUpLoading"
                                        :data="signUpList"
                                        style="width: 100%">
                                        <el-table-column
                                            prop="id"
                                            label="ID"
                                            width="100">
                                        </el-table-column>
                                        <el-table-column
                                            prop="course.name"
                                            label="课程名称"
                                            min-width="300">
                                       </el-table-column>
                                        <el-table-column
                                            prop="created_at"
                                            label="报名时间"
                                            width="180">
                                       </el-table-column>
                                        <el-table-column
                                            prop="pay_time"
                                            label="支付时间"
                                            width="180">
                                       </el-table-column>
                                        <el-table-column
                                            prop="status"
                                            label="状态"
                                            width="100">
                                            <template slot-scope="scope">
                                                <el-tag :type="signUpStatusTagList[scope.row.status]">
                                                    @{{ signUpStatusList[scope.row.status] }}
                                                </el-tag>
                                            </template>
                                       </el-table-column>
                                        <el-table-column
                                            fix="right"
                                            label="操作"
                                            min-width="300"
                                        >
                                            <template slot-scope="scope">
                                                <el-button
                                                    size="mini"
                                                    type="info"
                                                    plain
                                                    @click="handleShowCourseDetail(scope.row.course)"
                                                >详情</el-button>
                                                <template v-if="scope.row.status == 1">
                                                    <el-button
                                                        size="mini"
                                                        type="primary"
                                                        plain
                                                        @click="handleChangeStatus(scope.row, 3)"
                                                    >支付</el-button>
                                                    <el-button
                                                        size="mini"
                                                        type="primary"
                                                        plain
                                                        @click="handleChangeStatus(scope.row, 2)"
                                                    >取消</el-button>
                                                </template>
                                                <template v-else-if="scope.row.status == 3">
                                                    <el-button
                                                        size="mini"
                                                        type="primary"
                                                        plain
                                                        @click="handleChangeStatus(scope.row, 9)"
                                                    >退款</el-button>
                                                </template>
                                                <el-button
                                                    v-if="scope.row.status == 3"
                                                    size="mini"
                                                    type="danger"
                                                    plain
                                                    @click="handleShowCourseEvaluate(scope.row)"
                                                >评价</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>

                            </template>

                            <el-pagination
                                style="margin: 15px 0"
                                background
                                layout="prev, pager, next"
                                :current-page.sync="signUpPage"
                                @current-change="selectSignUpList"
                                :total="signUpTotal">
                            </el-pagination>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="个人中心" name="personal">
                        <el-form v-loading="userLoading" :model="userInfo" label-width="80px" style="width: 50%">
                            <el-form-item label="姓名">
                                <el-input v-model="userInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input :disabled="true" v-model="userInfo.email"></el-input>
                            </el-form-item>
                            <el-form-item label="角色">
                                <el-radio-group v-model="userInfo.user_type">
                                    <el-radio label="1">家长</el-radio>
                                    <el-radio label="2">学生</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="userInfo.password" type="password" placeholder="不输入任何内容则不更新密码"></el-input>
                            </el-form-item>
                            <el-form-item label="个人介绍">
                                <el-input v-model="userInfo.describe" :rows="4" type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleSaveUserInfo">保存</el-button>
                                <el-button type="danger" @click="handleExit">退出登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </template>

            <el-dialog title="评分" :visible.sync="courseEvaluateVisible" width="50%">
                <el-form :model="courseEvaluate" label-width="80px">
                    <el-form-item label="打分">
                        <el-rate v-model="courseEvaluate.star"></el-rate>
                    </el-form-item>
                    <el-form-item label="评价内容">
                        <el-input type="textarea" v-model="courseEvaluate.content"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSaveOrUpdateEvaluate">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


            <el-dialog title="详情" :visible.sync="courseDialogVisible" width="60%" top="5vh">
                <el-descriptions title="课程信息" :column="2" border style="margin-bottom: 10px">
                    <el-descriptions-item label="课程编号">@{{courseDetail.id}}</el-descriptions-item>
                    <el-descriptions-item label="课程名称">@{{courseDetail.name}}</el-descriptions-item>
                    <el-descriptions-item label="起始日期">@{{courseDetail.start_time}}</el-descriptions-item>
                    <el-descriptions-item label="结束日期">@{{courseDetail.end_time}}</el-descriptions-item>
                    <el-descriptions-item label="课程描述">@{{courseDetail.description}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="讲师信息" :column="2" border style="margin-bottom: 10px">
                    <el-descriptions-item label="姓名">@{{courseDetail.teacher.name}}</el-descriptions-item>
                    <el-descriptions-item label="类别">@{{courseDetail.teacher.department}}</el-descriptions-item>
                    <el-descriptions-item label="性别">@{{courseDetail.teacher.gender == 1 ? '男' : '女'}}</el-descriptions-item>
                    <el-descriptions-item label="讲师联系方式">@{{courseDetail.teacher.email}}/@{{courseDetail.teacher.phone}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="讲师资质" :column="3" border style="margin-bottom: 10px">
                    <template v-for="qualification in courseDetail.teacher.qualifications">
                        <el-descriptions-item label="资质">@{{qualification.qualification_name}}</el-descriptions-item>
                        <el-descriptions-item label="颁发机构">@{{qualification.issuing_organization}}</el-descriptions-item>
                        <el-descriptions-item label="等级">@{{qualification.qualification_level}}</el-descriptions-item>
                    </template>
                </el-descriptions>
            </el-dialog>
        </div>

    </div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: 'Vue',
            tabPosition: 'left',
            checkModel: 'course',
            courseType: 'all',
            courseList: [],
            courseDetail: {name: '', teacher: {name: ''}},
            courseTotal: 0,
            coursePage: 1,
            courseLoading: false,
            courseDialogVisible: false,
            courseEvaluateVisible: false,
            signUpStr: '全部',
            signUpStatusList: {
                0: '全部',
                1: '待支付',
                2: '已取消',
                3: '已支付',
                9: '已退款'
            },
            signUpStatusTagList: {
                1: 'warning',
                2: 'info',
                3: 'success',
                9: 'danger'
            },
            signUpList: [],
            signUpDetail: {name: '', teacher: {name: ''}},
            signUpTotal: 0,
            signUpPage: 1,
            signUpLoading: false,
            courseEvaluate: {
                star: 0,
                content: ''
            },
            userInfo: {},
            userLoading: false,
        },
        mounted() {
            // this.getUserInfo()
            this.selectCourseList()
            // this.selectSignUpList()
        },
        methods: {
            handleCheckModel() {
                if (this.checkModel == 'course') {
                    this.selectCourseList()
                } else if(this.checkModel == 'signUp') {
                    this.selectSignUpList()
                } else if(this.checkModel == 'personal') {
                    this.getUserInfo()
                }
            },
            getUserInfo() {
                this.userLoading = true
                let that = this
                window.api.get('/api/getUserInfo').then(function (response) {
                    that.userInfo = response.data
                    that.userLoading = false
                })
            },
            selectCourseList() {
                this.courseLoading = true
                let that = this
                window.api.get('/api/courseList?page=' + that.coursePage + "&courseType=" + this.courseType).then(function (response) {
                    that.courseList = response.data.data
                    that.courseTotal = response.data.total
                    that.coursePage = response.data.current_page
                    that.courseLoading = false
                })
            },
            collectCourse(course_id) {
                let that = this
                window.api.get('/api/collectCourse?course_id=' + course_id).then(function (response) {
                    that.$message({
                        message: response.message,
                        type: response.code == 200 ? 'success' : 'error'
                    });
                    that.selectCourseList()
                })
            },
            unCollectCourse(course_id) {
                this.courseLoading = true
                let that = this
                window.api.get('/api/unCollectCourse?course_id=' + course_id).then(function (response) {
                    that.$message({
                        message: response.message,
                        type: response.code == 200 ? 'success' : 'error'
                    });
                    that.selectCourseList()
                })
            },
            handleSignUp(course) {
                let that = this
                window.api.post('/api/signUp', {
                    course_id: course.id
                }).then(function (response) {
                    that.$message({
                        message: response.message,
                        type: response.code == 200 ? 'success' : 'error'
                    });
                    if (response.code == 200) {
                        that.selectCourseList()
                    }
                })
            },
            handleShowCourseDetail(course) {
                this.courseDetail = course
                this.courseDialogVisible = true
            },
            handleClickSignUpStatus(tab, event) {
                console.log(this.signUpStatus)
                this.selectSignUpList()
            },
            selectSignUpList() {
                this.signUpLoading = true
                let that = this
                window.api.get('/api/signUpList?page=' + that.signUpPage + "&status=" + that.signUpStatus).then(function (response) {
                    that.signUpList = response.data.data
                    that.signUpTotal = response.data.total
                    that.signUpPage = response.data.current_page
                    that.signUpLoading = false
                })
            },
            handleChangeStatus(row, status) {
                let that = this
                this.$confirm('确定执行该操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.api.post('/api/signUpChangeStatus', {
                        course_id: row.course.id,
                        status: status
                    }).then(function (response) {
                        that.$message({
                            message: response.message,
                            type: response.code == 200 ? 'success' : 'error'
                        });
                        if (response.code == 200) {
                            that.selectSignUpList()
                        }
                    })
                })
            },
            handleShowCourseEvaluate(row) {
                // row.evaluate
                console.log(row)
                this.courseEvaluateVisible = true
                this.courseEvaluate = {
                    id: row.evaluate ? row.evaluate.id : null,
                    star: row.evaluate ? row.evaluate.star : 5,
                    content: row.evaluate ? row.evaluate.content : '',
                    sign_up_id: row.id,
                    course_id: row.course.id,
                }
                console.log(this.courseEvaluate)
            },
            handleSaveOrUpdateEvaluate() {
                let that = this
                window.api.post('/api/saveOrUpdateEvaluate', this.courseEvaluate).then(function (response) {
                    that.courseEvaluateVisible = false
                    that.$message({
                        message: response.message,
                        type: response.code == 200 ? 'success' : 'error'
                    });
                    if (response.code == 200) {
                        that.selectSignUpList()
                    }
                })
            },
            handleSaveUserInfo() {
                let that = this
                window.api.post('/api/saveUserInfo', this.userInfo).then(function (response) {
                    that.$message({
                        message: response.message,
                        type: response.code == 200 ? 'success' : 'error'
                    });
                    that.getUserInfo()
                })
            },
            handleExit() {
                localStorage.setItem('token', '')
                window.location.href = '/login';
            }
        },
        computed: {
            signUpStatus() {
                if (this.signUpStr == '待支付') {
                    return 1
                } else if (this.signUpStr == '已取消') {
                    return 2
                } else if (this.signUpStr == '已支付') {
                    return 3
                } else if (this.signUpStr == '已退款') {
                    return 9
                } else {
                    return 0
                }
            }
        }
    })
</script>

<style>
    body {
        margin: 0;

    }
    .s-header {
        background: #0d6aad;
        height: 100px;
        line-height: 100px;
        padding-left: 20px;
        font-size: 50px;
        color: white;
    }
    .s-body {
        padding: 10px;
    }
    .s-course-card {
        width: 100%;
        height: 250px;
        display: inline-block;
        margin-bottom: 15px;
        margin-right: 15px;
    }
    .s-course-cover {
        cursor: pointer;
        width: 100%;
        height: 150px;
    }
    .signup-table {
        width: 100%;
    }
    .s-course-sign-button {
        display:flex;
        float: right;
        padding-top: 3px;
    }
    .multiLineEllipsis {
        display: inline-block; /* 将span转换为行内块级元素 */
        max-width: 80%; /* 设置最大宽度 */
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }
</style>

</html>
